<template>
    <view class="chat">
        <!-- 顶部标题 -->
        <view class="topTabbar">
            <!-- 标题 -->
            <view class="text">匿名2</view>
        </view>
        <scroll-view :style="{ height: `${windowHeight - inputHeight - 180}rpx` }" id="scrollview" scroll-y="true"
            :scroll-top="scrollTop" class="scroll-view">
            <!-- 聊天主体 -->
            <view id="msglistview" class="chat-body">
                <view v-for="(item, index) in msgList" :key="index">
                    <!-- 自己发的消息 -->
                    <view class="item self" v-if="item.userContent != ''">
                        <view class="content right">
                            {{ item.userContent }}
                        </view>
                        <image class="avatar" :src="item.image">
                        </image>
                    </view>
                    <!-- 机器人发的消息 -->
                    <view class="item Ai" v-if="item.botContent != ''">
                        <image class="avatar" :src="item.image">
                        </image>
                        <view class="content left">
                            {{ item.botContent }}
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 底部消息发送栏 -->
        <!-- 用来占位，防止聊天消息被发送框遮挡 -->
        <view class="chat-bottom" :style="{ height: `${inputHeight}rpx` }">
            <view class="send-msg" :style="{ bottom: `${keyboardHeight + 40}rpx` }">
                <view class="uni-textarea">
                    <textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
                        placeholder="快来聊天吧~" :show-confirm-bar="false" :adjust-position="false" @linechange="sendHeight"
                        @focus="focus" @blur="blur" auto-height></textarea>
                </view>
                <button @click="handleSend" class="send-btn">发送</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, onUpdated, computed, nextTick } from 'vue';

const keyboardHeight = ref(0);
const bottomHeight = ref(0);
const scrollTop = ref(0);
const userId = ref('');
const chatMsg = ref('');
const msgList = ref([
    {
        botContent: "你好啊，很高兴你可以关注我，请问我有什么可以帮助你的吗？",
        userContent: "",
        image: "/static/images/icon/icon_code.png"
    },
    {
        botContent: "",
        userContent: "你好呀，非常高兴认识你",
        image: "/static/images/icon/icon_code.png"
    },
]);

const windowHeight = computed(() => {
    return rpxTopx(uni.getSystemInfoSync().windowHeight);
});

const inputHeight = computed(() => {
    return bottomHeight.value + keyboardHeight.value;
});
onUpdated(() => {
    // 页面更新时调用聊天消息定位到最底部
    scrollToBottom();
});
onMounted(() => {
    // #ifndef H5
    uni.onKeyboardHeightChange(res => {
        keyboardHeight.value = rpxTopx(res.height);
        if (keyboardHeight.value < 0) keyboardHeight.value = 0;
    });
    // #endif
    sendHeight();
});

onBeforeUnmount(() => {
    // uni.offKeyboardHeightChange()
});

const focus = () => {
    scrollToBottom();
};

const blur = () => {
    scrollToBottom();
};

const rpxTopx = (px) => {
    const deviceWidth = uni.getSystemInfoSync().windowWidth;
    const rpx = (750 / deviceWidth) * Number(px);
    return Math.floor(rpx);
};

const sendHeight = () => {
    setTimeout(() => {
        const query = uni.createSelectorQuery();
        query.select('.send-msg').boundingClientRect();
        query.exec(res => {
            bottomHeight.value = rpxTopx(res[0].height);
        });
    }, 10);
};

const scrollToBottom = () => {
    setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('#scrollview').boundingClientRect();
        query.select('#msglistview').boundingClientRect();
        query.exec((res) => {
            if (res[1].height > res[0].height) {
                scrollTop.value = rpxTopx(res[1].height - res[0].height);
            }
        });


    }, 15);
};

const handleSend = () => {
    if (!chatMsg.value || !/^\s+$/.test(chatMsg.value)) {
        const obj = {
            botContent: "",
            userContent: chatMsg.value,
            image: "/static/images/icon/icon_code.png"
        };
        msgList.value.push(obj);
        chatMsg.value = '';
        scrollToBottom();
    } else {
        // this.$modal.showToast('不能发送空白消息');
    }
};
</script>

<style lang="scss" scoped>
$chatContentbgc: #C2DCFF;
$sendBtnbgc: #4F7DF5;

view,
button,
text,
input,
textarea {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 聊天消息 */
.chat {
    .topTabbar {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        display: flex;
        margin-top: 80rpx;
        justify-content: space-between;

        .icon {
            margin-left: 20rpx;
        }

        .text {
            margin: auto;
            font-size: 16px;
            font-weight: 700;
        }

        .button {
            width: 10%;
            margin: auto 20rpx auto 0rpx;
        }
    }

    .scroll-view {
        ::-webkit-scrollbar {
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background: transparent;
            color: transparent;
        }

        // background-color: orange;
        background-color: #F6F6F6;

        .chat-body {
            display: flex;
            flex-direction: column;
            padding-top: 23rpx;
            // background-color:skyblue;

            .self {
                justify-content: flex-end;
            }

            .item {
                display: flex;
                padding: 23rpx 30rpx;
                // background-color: greenyellow;

                .right {
                    background-color: $chatContentbgc;
                }

                .left {
                    background-color: #FFFFFF;
                }

                // 聊天消息的三角形
                .right::after {
                    position: absolute;
                    display: inline-block;
                    content: '';
                    width: 0;
                    height: 0;
                    left: 100%;
                    top: 10px;
                    border: 12rpx solid transparent;
                    border-left: 12rpx solid $chatContentbgc;
                }

                .left::after {
                    position: absolute;
                    display: inline-block;
                    content: '';
                    width: 0;
                    height: 0;
                    top: 10px;
                    right: 100%;
                    border: 12rpx solid transparent;
                    border-right: 12rpx solid #FFFFFF;
                }

                .content {
                    position: relative;
                    max-width: 486rpx;
                    border-radius: 8rpx;
                    word-wrap: break-word;
                    padding: 24rpx 24rpx;
                    margin: 0 24rpx;
                    border-radius: 5px;
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 42rpx;
                }

                .avatar {
                    display: flex;
                    justify-content: center;
                    width: 78rpx;
                    height: 78rpx;
                    background: $sendBtnbgc;
                    border-radius: 50rpx;
                    overflow: hidden;

                    image {
                        align-self: center;
                    }

                }
            }
        }
    }

    /* 底部聊天发送栏 */
    .chat-bottom {
        width: 100%;
        height: 100rpx;
        background: #F4F5F7;
        transition: all 0.1s ease;

        .send-msg {
            display: flex;
            align-items: flex-end;
            padding: 16rpx 30rpx;
            width: 100%;
            min-height: 177rpx;
            position: fixed;
            bottom: 0;
            background: #fff;
            transition: all 0.1s ease;
        }

        .uni-textarea {
            padding-bottom: 70rpx;

            textarea {
                width: 537rpx;
                min-height: 75rpx;
                max-height: 500rpx;
                background: #f1f1f1;
                border-radius: 40rpx;
                font-size: 32rpx;
                font-family: PingFang SC;
                color: #333333;
                line-height: 74rpx;
                padding: 5rpx 8rpx;
                text-indent: 30rpx;
            }
        }

        .send-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 76rpx;
            margin-left: 25rpx;
            width: 120rpx;
            height: 75rpx;
            background: #ed5a65;
            border-radius: 50rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28rpx;
        }
    }
}
</style>